<template>
	<div>
        <div id="colorlib-page">
		<div id="colorlib-blog">
			<div class="container">
				<div class="row text-center">
					<h2 class="bold">Blog</h2>
				</div>
				<div class="row row-pb-md">
					<div class="col-md-4" v-for="(item, index) in dataShow" :key="index" >
						<div class="article animate-box">
							<a :href="/#/+item.b_link" class="blog-img">
								<img class="img-responsive" :src="item.b_img" alt="html5 bootstrap by colorlib.com">
								<div class="overlay"></div>
								<div class="link">
								</div>
							</a>
							<div class="desc">
								<span class="meta">{{item.b_time}}</span>
								<h2><a :href="/#/+item.b_link">{{item.b_title}}</a></h2>
								<p>{{item.b_content}}</p>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-5"></div>
					<div class="col-md-4">
					<nav class="blog-pagination justify-content-center d-flex">
						<ul class="pagination">
							<li class="page-item" v-show="!currentPage==0">
								<a href="javascript:;" class="page-link" v-on:click="prePage">
								&lt;
								</a>
							</li>
								<li class="page-item" v-for="(item, index) in totalPage" :key="index" :class="{active: currentPage==index}">
									<a href="javascript:;" class="page-link" v-on:click="toPage(index)">
										{{ index+1 }}
									</a>
								</li>
							<li class="page-item" v-show="currentPage!==pageNum-1">
								<a href="javascript:;" class="page-link" v-on:click="nextPage">
									&gt;
								</a>
							</li>
						</ul>
					</nav>
					</div>
				</div>
			</div>
		</div>
		<footer>
			<div id="footer">
				<div class="container">
					<div class="row">
						<div class="col-md-4 col-pb-sm text-center">
							<div class="row">
								<div class="col-md-10">
									<h2>Office</h2>
									<p>291 South 21th Street, <br> Suite 721 New York NY 10016</p>
								</div>
							</div>
						</div>
						<div class="col-md-4 col-pb-sm text-center">
							<h2>Get in Touch</h2>
							<p><a href="#">noah@info.com</a></p>
						</div>
						<div class="col-md-4 col-pb-sm text-center">
							<h2>Social</h2>
							<p class="colorlib-social-icons">
								<a href="#"><i class="icon-facebook4"></i></a>
								<a href="#"><i class="icon-twitter3"></i></a>
								<a href="#"><i class="icon-googleplus"></i></a>
								<a href="#"><i class="icon-dribbble2"></i></a>
							</p>
						</div>
					</div>
					<div class="row">
						<div class="col-md-12 text-center">
							<p>
							</p>
						</div>
					</div>
				</div>
			</div>
		</footer>
	</div>
	</div>
</template>
<script>
import '../assets/css/main.css'
import {blog} from '../api/index.js';
export default {
      name: 'blog',
      data () {
        return { 
		  blog1:[],
		  // 总页数
        pageNum:2,
        // 每页显示的个数
        pageSize:3,
        // 当前页
        currentPage:0,
        // 总数据
        totalPage:[],
        // 当前显示的数据
        dataShow:[],
		}
	  },
	  created: function(){
      
    },
      methods:{
        async getblog(){ 
		  var result=await blog();
		//    console.log(result);
		  this.blog1=result['message']['blog'];
		  this.getnav()
		//  console.log(this.blog1);
		},
		getnav(){
			var vm = this;
      // 总页数
      		vm.pageNum = Math.ceil(vm.blog1.length / vm.pageSize) || 1 ;
      // 分组
      		for (var i = 0; i<vm.pageNum; i++) {
          		vm.totalPage[i] = vm.blog1.slice(vm.pageSize * i, vm.pageSize * (i + 1))
     	 }
      // 取值
	  vm.dataShow = vm.totalPage[vm.currentPage];
	//   console.log(vm.pageNum);
		},
		nextPage: function(){
            var vm = this;
            if (vm.currentPage == vm.pageNum - 1) return;
            vm.dataShow = vm.totalPage[++vm.currentPage]   
        },
        prePage: function(){
            var vm = this;
            if (vm.currentPage == 0) return;
            vm.dataShow = vm.totalPage[--vm.currentPage]
        },
        toPage: function(page){
            var vm = this;
            vm.currentPage = page
            vm.dataShow = vm.totalPage[vm.currentPage];
        }
	},
	
      mounted(){ 
      this.getblog();
      }
	}	
	
</script>